<template>
	<view :style="{'min-height':minH}">
		<view class="wish-list">
			<view class="no-data" v-if="wishList.length == 0">
				<view class="title-icon">
					<image src="../../static/images/icon/wish.png" mode=""></image>
				</view>
				<view class="">
					<text>您的愿望单暂无商品</text>
				</view>
				<view class="notice notice-desc">
					<text v-if="!hasLogin">登录您的账户</text>
					<text v-if="hasLogin">随时关注心仪造型的最新动态</text>
				</view>
				<view class="notice">
					<text v-if="!hasLogin">即可在所有设备同步更新愿望单</text>
					<text v-if="hasLogin">点击</text>
					<image v-if="hasLogin" src="../../static/images/icon/wish.png" mode="widthFix"></image>
					<text v-if="hasLogin">添加至愿望单</text>
				</view>
				<view class="login-flag" v-if="!hasLogin" @click="invokeLogin">
					<text>去登录</text>
					<image src="../../static/images/icon/icon-right.png" mode="widthFix"></image>
				</view>
				<view class="go-shopping" v-if="hasLogin">
					<button type="default" class="wss-btn" @click="doInvoke">开始探索</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {globalMixin} from '@/util/globalMixin.js'
	export default {
		mixins:[globalMixin],
		data() {
			return {
				winH: 0,
				wishList: [],
				hasLogin: false
			}
		},
		onLoad() {
			if(this.validateToken()) {
				this.hasLogin = true
			}
		},
		methods: {
			invokeLogin() {
				// 跳转你登录
				uni.navigateTo({
				    url: '/pages/user/login'
				});
			},
			doInvoke() {
				// 跳转首页
				uni.switchTab({
				   url: '/pages/index/index',
					success() {
						var page = getCurrentPages().pop(); 
						page.onLoad(); 
					}
				});
			},
			initH () {
				let _self = this
				uni.getSystemInfo({
				    success: function (res) {
						_self.winH = res.windowHeight
				    }
				});
			}
		},
		computed: {
			minH: function(){
				return this.winH+"px"
			}
		}
	}
</script>

<style scoped lang="scss">
.no-data {
	width: 100%;
	text-align: center;
	.title-icon {
		margin-bottom: 10rpx;
		image {
			height: 64rpx;
			width: 64rpx;
		}
	}
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	.notice {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		image {
			width: 40rpx;
			height: 40rpx;
		}
	}
	.notice-desc {
		margin-top: 40rpx;
	}
	.login-flag {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		margin-top: 100rpx;
		image {
			width: 48rpx;
			height: 48rpx;
		}
	}
	.go-shopping {
		margin-top: 100rpx;
	}
}
</style>
